<template>
  <div class="wang-editor-box">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :default-config="toolbarConfig"
      :mode="mode"
    />
    <Editor
      v-model="html"
      style="height: 400px"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  name: 'WangEditor',
  components: {
    Editor,
    Toolbar
  },
  props: {
    imageServe: {
      type: String,
      default: '/api/uploadImage'
    },
    defaultValue: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {},
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'simple'
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    // 组件销毁时，及时销毁编辑器
    editor.destroy()
  },
  methods: {
    onCreated(editor) {
      // 暂时忽略了本地上传图片的功能
      this.toolbarConfig = {
        excludeKeys: [
          'uploadImage'
        ]
      }
      // 一定要用 Object.seal() ，否则会报错
      this.editor = Object.seal(editor)
      if (this.defaultValue != null) {
        this.html = this.defaultValue
      }
    },
    onChange(editor) {
      const nullStatus = this.isNullVal(editor.getHtml())
      if (nullStatus) {
        this.$emit('editorChange', '', '')
        return
      }
      this.$emit('editorChange', editor.getHtml(), editor.getText())
    },
    // 判断富文本内容是都为空
    isNullVal(content) {
      // 判断富文本编辑器输入是否为空或回车
      const getText = (str) => {
        return str
          .replace(/<[^<p>]+>/g, '') // 将所有<p>标签 replace ''
          .replace(/<[</p>$]+>/g, '') // 将所有</p>标签 replace ''
          .replace(/&nbsp;/gi, '') // 将所有 空格 replace ''
          .replace(/<[^<br/>]+>/g, '') // 将所有 换行符 replace ''
      }
      const isNull = (str) => {
        if (str === '') return true
        var regu = '^[ ]+$'
        var re = new RegExp(regu)
        return re.test(str)
      }
      return isNull(getText(content))
    },
    // 配置文件上传功能配置
    getEditorConfig() {
      const editorConfig = {
        MENU_CONF: {}
      }
      // 图片上传配置
      editorConfig.MENU_CONF['uploadImage'] = {
        server: this.imageServe, // 上传地址
        fieldName: 'wangeditor-uploaded-image', // form-data fieldName ，默认值 'wangeditor-uploaded-image'
        maxFileSize: 5 * 1024 * 1024, // 单个文件的最大体积限制，默认为 2M
        maxNumberOfFiles: 10, // 最多可上传几个文件，默认为 100
        allowedFileTypes: ['image/*'], // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        // meta: { // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
        //   token: 'xxx',
        //   otherKey: 'yyy'
        // },
        metaWithUrl: false, // 将 meta 拼接到 url 参数中，默认 false
        // headers: { // 自定义增加 http  header
        //   Accept: 'text/x-json',
        //   otherKey: 'xxx'
        // },
        withCredentials: true, // 跨域是否传递 cookie ，默认为 false
        timeout: 5 * 1000 // 超时时间，默认为 10 秒
      }
      return editorConfig
    }
  }
}
</script>

<style lang="scss" scoped>
.wang-editor-box {
  width: 100%;
  height: 100%;
  border: 1px solid #e4e4e4;
}
</style>
